<template>
  <div class="goal-wrapper">
    <div class="addGoalDialog" v-if="showAddGoal">
      <div class="mask" ref="mask" @click.stop="closeGoal"></div>
      <div :class="animationName" class="addContent">
        <div class="goal-header">
          <i class="el-icon-arrow-down" @click.stop="closeGoal"></i>
          {{goalForm.id ? '编辑': '添加'}}目标
        </div>
        <div class="goal-content">
          <div class="form-item">
            <textarea class="goal-name" v-model="goalForm.goalName" placeholder="输入名称：力往一处使，确保目标上下对齐"></textarea>
          </div>
          <div class="form-item clearfix">
            <div class="label">目标年份</div>
            <div class="input" @click.stop="selectFormYear">{{formYearName}}<i class="el-icon-arrow-right"></i></div>
          </div>
          <div class="form-item clearfix">
            <div class="label">目标季度</div>
            <div class="input" @click.stop="selectFormSeason">{{formSeasonName}}<i class="el-icon-arrow-right"></i></div>
          </div>
          <div class="form-item clearfix">
            <div class="label"><span style="color:red;">*</span>类型</div>
            <div class="input">
              <el-radio-group v-model="goalForm.goalTag" size="small">
                <el-radio-button label="1">公司级</el-radio-button>
                <el-radio-button label="2">部门级</el-radio-button>
                <el-radio-button label="3">团队级</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="form-item clearfix">
            <div class="label">执行部门</div>
            <div class="input" @click.stop="openDept">{{goalForm.goalExecuteDepartmentName}}<i class="el-icon-arrow-right"></i></div>
          </div>
          <div class="form-item clearfix">
            <p>备注</p>
            <textarea class="goal-name" v-model="goalForm.goalContent" placeholder="请输入备注内容"></textarea>
          </div>
          <div class="form-item clearfix">
            <div class="label">上级关键结果</div>
            <div class="input" @click="openKr">{{goalForm.goalBelongName}}<i class="el-icon-arrow-right"></i></div>
          </div>
          <div class="form-item clearfix" v-if="goalForm.id">
            <div class="label">目标状态</div>
            <div class="input" @click="changeStatus">{{goalForm.goalStatus === '1'? '拟定状态': goalForm.goalStatus === '2'? '执行阶段': '完成阶段'}}<i class="el-icon-arrow-right"></i></div>
          </div>
        </div>
        <div class="goal-button">
          <div @click="saveGoal">保存</div>
        </div>
      </div>
    </div>
    <div class="select-dept" v-if="showDepart">
      <div class="mask" ref="selectmask" @click.stop="closeSelect"></div>
      <div :class="animationName2" class="department">
        <div class="dept-header">
          <i class="el-icon-arrow-down" @click.stop="closeSelect"></i>
          <span @click.stop="backOrigin">公司部门</span>
          <span v-for="(path, idx) in pathArr" :key="path.id" @click.stop="openNext(path,idx)"><i class="el-icon-arrow-right"></i>{{path.departmentName}}</span> 
        </div>
        <div class="dept-list">
          <div class="dept-item" @click.stop="selectDept(dept)" v-for="dept in deptShow" :key="dept.id">
            <div class="dept-name">{{dept.departmentName}} {{dept.departmentPrincipalName? `(${dept.departmentPrincipalName})`: ''}}</div>
            <div class="dept-next" @click.stop="openNext(dept)"><img src="../../../assets/img/xiaji.png" alt="">下级</div>
          </div>
        </div>
      </div>
    </div>
    <div class="select-kr" v-if="showKr">
      <div class="mask" ref="krmask" @click.stop="closeKrSelect"></div>
      <div class="kr-wrapper" :class="animationName3">
        <div class="kr-header">
          <i class="el-icon-arrow-down" @click.stop="closeKrSelect"></i>
          选择对齐的关键结果
        </div>
        <div class="goal-type">
          <span @click="selectType">{{currentTypeName}}OKR<i class="el-icon-arrow-down"></i></span>
        </div>
        <div class="kr-body">
          <div class="goal-list" v-infinite-scroll="loadData" infinite-scroll-disabled="disabled2" infinite-scroll-immediate="false">
            <div class="goal-item" v-for="goal in goalList" :key="goal.id">
              <div class="goal">
                <div class="progress">
                  <el-progress :width="40" :stroke-width="3" type="circle" :percentage="goal.goalProgressPercent || 0"></el-progress>
                </div>
                <div class="goal-info">
                  <p class="title">{{goal.goalName}}</p>
                  <p class="name"><span>{{goal.goalTag === '1'? '公司': goal.goalTag === '2'? '部门': '团队'}}级</span><span v-if="goal.goalExecuteDepartmentName">{{goal.goalExecuteDepartmentName? goal.goalExecuteDepartmentName: ''}}{{goal.goalPrincipalName? `(${goal.goalPrincipalName})`: ''}}</span></p>
                </div>
              </div>
              <div class="kr-list">
                <div @click="selectKr(kr, goal)" class="kr-item" v-for="kr in goal.krList" :key="kr.id">关键结果：{{kr.krName}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import {dateUtil} from '@/utils/dateUtil'
import formUtil from "@/utils/formUtil";


export default {
  data() {
    return {
      goalList: [],
      showAddGoal: false,
      showDepart: false,
      showKr: false,
      animationName: 'open',
      animationName2: 'open',
      animationName3: 'open',
      goalForm: {
        goalName: '',
        goalExecuteDepartmentId: '',
        goalExecuteDepartmentName: '',
        goalTag: '',
        goalLevel: '1',
        goalBelongId: '',
        goalBelongName: '',
        goalContent: '',
        goalPeriodYear: '',
        goalPeriodTime: '',
        goalStatus: '1'
      },
      goalFormVerify: {
        goalName: '请输入目标名称'
      },
      currentTypeName: '全部',
      currentType: '',
      searchPost:{
        goalExecuteDepartmentId: '',
        goalPeriodYear: '',
        goalPeriodTime: '',
        krDataType: 1,
        goalTag: '',
        searchType: '1',
        filterGoalId: '',
        page: 1,
        limit: 999
      },
      isFirstloading: false,
      loading: false,
      totalPage: 0,
      yearArr: [],
      seasonArr: [{
        value: `0201`,
        key: '第1季度LKR'
      },{
        value: `0202`,
        key: '第2季度LKR'
      },{
        value: `0203`,
        key: '第3季度LKR'
      },{
        value: `0204`,
        key: '第4季度LKR'
      },{
        value: `0200`,
        key: '年度LKR'
      }],
      formYearName: '',
      formSeasonName: '',
      deptTotal: [],
      deptShow: [],
      pathArr: [],
      goalBelongTag: 0,
    }
  },
  mixins: [dingMixin],
  computed: {
    disabled2 () {
      return this.isFirstloading || this.loading || this.noMore2
    },
    noMore2 () {
      return this.searchPost.page >= this.totalPage;
    },
  },
  props: ['postFormYear', 'postFormYearName', 'postFormSeason', 'postFormSeasonName'],
  mounted() {
    this.setTimeArr();
    this.getAllDept();
  },
  methods: {
    selectType() {
      this.mobileChosen([{key: '全部',value: ''}, {key: '公司级',value: '1'}, {key: '部门级',value: '2'}, {key: '团队级',value: '3'}], this.currentType,(data) => {
        this.currentTypeName = data.key;
        this.currentType = data.value;
        this.getGoalList(true, 'goal')
      })
    },
    backOrigin() {
      this.pathArr = [];
      this.deptShow = this.deptTotal.filter(item => item.departmentBelongId === '');
    },
    closeSelect() {
      this.animationName2 = 'close';
      this.$refs.selectmask.style.opacity = 0;
      setTimeout(() => {
        this.showDepart = false;
        this.animationName2 = 'open';
      }, 225)
    },
    closeKrSelect() {
      this.animationName3 = 'close';
      this.$refs.krmask.style.opacity = 0;
      setTimeout(() => {
        this.showKr = false;
        this.animationName3 = 'open';
      }, 225)
    },
    changeStatus() {
      this.mobileSelect('选择当前状态', ['拟定状态', '执行状态', '完成状态'],({buttonIndex}) => {
        this.goalForm.goalStatus = buttonIndex + 1 + '';
      })
    },
    async saveGoal() {
      if(!formUtil.verifyData(this.goalForm, this.goalFormVerify)) return;
      if(this.goalForm.goalTag * 1 < this.goalBelongTag) return this.mobileAlert('目标类型不可超过上级目标类型');
      if (!(await this.$httpN.postB(this.goalForm.id ? 'lkr/goal/goalUpdate': 'lkr/goal/goalSave', this.goalForm))) return;
      this.mobileMessage('保存成功')
      this.closeGoal();
      this.$emit('reload')
    },
    openKr() {
      this.showKr = true;
      this.$nextTick(() => {
        this.$refs.krmask.style.opacity = 0.5;
      })
      this.getGoalList(true, 'kr');
    },
    selectKr(kr, goal) {
      this.goalBelongTag = Number(goal.goalTag);
      this.goalForm.goalBelongId = kr.id;
      this.goalForm.goalBelongName = kr.krName;
      this.closeKrSelect();
    },
    openDept() {
      this.showDepart = true;
      this.$nextTick(() => {
        this.$refs.selectmask.style.opacity = 0.5;
      })
    },
    selectDept(dept) {
      this.goalForm.goalExecuteDepartmentId = dept.id;
      this.goalForm.goalExecuteDepartmentName = dept.departmentName;
      this.closeSelect()
    },
    openNext(dept, idx){
      if(idx >= 0) {
        this.pathArr = this.pathArr.splice(0, (idx+1));
      }else{
        this.pathArr.push(dept);
      }
      this.deptShow = this.deptTotal.filter(item => item.departmentBelongId === dept.id);
    },
    setTimeArr() {
      let year = parseInt((new Date).Format(`yyyy`));
      this.yearArr = []
      for (let i=-5; i<=5; i++) {
        this.yearArr.push({
          value: `${year-i}`,
          key: `${year-i}年`
        })
      }
    },
    async getAllDept() {
      this.deptTotal = await this.$httpN.postB('lkr/organization/organization');
      this.deptShow = this.deptTotal.filter(item => !item.departmentBelongId);
    },
    async loadData() {
      this.loading = true;
      this.searchPost.page ++;
      await this.getGoalList(false, 'kr');
    },
    async getGoalList(init, type) {
      if(init) {
        this.searchPost.page = 1;
        this.searchPost.goalPeriodYear = this.goalForm.goalPeriodYear;
        this.searchPost.goalPeriodTime = (type === 'kr' && this.goalForm.goalPeriodTime === '0200') ? '' : this.goalForm.goalPeriodTime;
        this.searchPost.goalTag = this.currentType;
        this.searchPost.filterGoalId = this.goalForm.id ? this.goalForm.id: '';
        this.goalList = [];
        this.isFirstloading = true;
      }
      let {list, totalCount, totalPage} = await this.$httpN.postB('lkr/goal/goalList', this.searchPost)
      this.loading = false;
      this.goalList.push(...list);
      if(init) {
        this.totalPage = totalPage;
        this.$nextTick(() => {
          this.isFirstloading = false;
        })
      }
    },
    closeGoal() {
      this.animationName = 'close';
      this.$refs.mask.style.opacity = 0;
      setTimeout(() => {
        this.showAddGoal = false;
        this.animationName = 'open';
      }, 225)
    },
    openGoalDialog(goal) {
      if(goal) {
        this.goalForm = formUtil.deepCopy(goal);
        this.formYearName = `${this.goalForm.goalPeriodYear}年`;
        this.formSeasonName = this.goalForm.goalPeriodTime === '0200' ? this.seasonArr[4].key : `第${this.goalForm.goalPeriodTime.substr(3,1)}季度LKR`;
      }else {
        this.resetGoalForm();
      }
      this.showAddGoal = true;
      this.$nextTick(() => {
        this.$refs.mask.style.opacity = 0.5;
      })
    },
    resetGoalForm() {
      formUtil.resetData(this.goalForm);
      this.goalForm.goalLevel = '1';
      this.goalForm.goalStatus = '1';
      this.goalForm.goalTag = '1'
      this.goalBelongTag = 0;
      //目标周期默认当前周期
      this.formYearName = this.postFormYearName;
      this.formSeasonName = this.postFormSeasonName;
      this.goalForm.goalPeriodYear = this.postFormYear;
      this.goalForm.goalPeriodTime = this.postFormSeason;
    },
    selectFormYear() {
      this.mobileChosen(this.yearArr, this.formYearName,(data) => {
        this.goalForm.goalPeriodYear = data.value;
        this.formYearName = data.key;
      })
    },
    selectFormSeason() {
      this.mobileChosen(this.seasonArr, this.formSeasonName,(data) => {
        this.goalForm.goalPeriodTime = data.value;
        this.formSeasonName = data.key;
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.addGoalDialog{
  position: fixed;
  height: 100vh;
  bottom: 0;
  left: 0;
  width: 100%;
  .mask{
    background: rgb(0,0,0);
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    transition: all 225ms;
    width: 100%;
    opacity: 0;
  }
  .addContent{
    position: absolute;
    height: 90vh;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    border-radius: 15px 15px 0 0 ;
    background: #F2F3F5;
    animation: btt-drawer-in 225ms cubic-bezier(0,0,.2,1) 0s;
    .goal-header{
      height: 46px;
      line-height: 46px;
      background: white;
      text-align: center;
      border-radius: 15px 15px 0 0 ;
      font-weight: bold;
      font-size: 16px;
      position: relative;
      i{
        position: absolute;
        left: 15px;
        top: 15px;
        font-weight: bold;
      }
    }
    .goal-content{
      margin-top: 10px;
      .form-item{
        background: white;
        padding: 6px 12px;
        border-bottom: 1px solid #ECECEC;
        .goal-name{
          font-size: 18px;
          width: 100%;
          height: 60px;
          border: none;
          outline: none;
          resize:none;
          background: transparent;
        }
        .label{
          float:left;
          line-height: 46px;
          font-size:15px;
        }
        .input{
          float:right;
          line-height: 46px;
          min-width: 40px;
          text-align: right;
        }
      }
    }
    .goal-button{
      height: 50px;
      background: white;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 6px 12px;
      div{
        text-align: center;
        width: 100%;
        background: #3396FB;
        line-height: 36px;
        color: white;
        border-radius: 5px;
      }
    }
  }
  .addContent.open{
    animation: btt-drawer-in 225ms cubic-bezier(0,0,.2,1) 0s;
  }
  .addContent.close{
    animation: btt-drawer-out 225ms cubic-bezier(0,0,.2,1) 0s;
  }
}
.select-kr{
  height: 100vh;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 15px 15px 0 0 ;
  z-index: 10;
  .mask{
    background: rgb(0,0,0);
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    transition: all 225ms;
    width: 100%;
    opacity: 0;
  }
  .kr-wrapper.open{
    animation: btt-drawer-in 225ms cubic-bezier(0,0,.2,1) 0s;
  }
  .kr-wrapper.close{
    animation: btt-drawer-out 225ms cubic-bezier(0,0,.2,1) 0s;
  }
  .kr-wrapper{
    height: 90vh;
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
    background: #F6F6F6;
    border-radius: 15px 15px 0 0 ;
    .kr-header{
      height: 46px;
      line-height: 46px;
      padding: 0 16px;
      font-weight: bold;
      background: white;
      border-radius: 15px 15px 0 0 ;
      text-align: center;
      i{
        position: absolute;
        left: 16px;
        top: 16px;
      }
    }
    .goal-type{
      margin-top: 10px;
      text-align: center;
    }
    .kr-body{
      margin-top: 10px;
      .goal-list{
        margin-top: 10px;
        height: calc(90vh - 140px);
        overflow-y: auto;
        padding: 0 16px;
        .goal-item{
          border-radius: 4px;
          box-shadow: 0 1px 3px rgb(221, 221, 221);
          background: white;
          margin-bottom: 10px;
          min-height: 80px;
          .kr-list{
            padding: 0 16px;
            text-align: center;
            .kr-item{
              padding: 10px 0;
              border-top: 1px solid #ECECEC;
            }
          }
          .goal{
            min-height: 80px;
            display: flex;
            .progress{
              width: 80px;
              padding-top:20px;
              padding-left: 20px;
            }
            .goal-info{
              width:calc(100% - 80px);
              padding-top: 20px;
              p{
                margin: 0;
              }
              .title{
                font-weight: bold;
                font-size: 16px;
                width: 100%;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
              }
              .name{
                margin-top:5px;
                font-size:12px;
                >span:first-child{
                  display: inline-block;
                  margin-right: 10px;
                  background: #C9E8FE;
                  padding: 5px 7px;
                  color: #3a8ee6;
                  border-radius: 50px;
                }
                >span:last-child{
                  display: inline-block;
                  padding: 5px 7px;
                  border:1px solid #ECECEC;
                  border-radius: 50px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.select-dept .open{
  animation: btt-drawer-in 225ms cubic-bezier(0,0,.2,1) 0s;
}
.select-dept .close{
  animation: btt-drawer-out 225ms cubic-bezier(0,0,.2,1) 0s;
}
.select-dept{
  height: 100vh;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  .mask{
    background: rgb(0,0,0);
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    transition: all 225ms;
    width: 100%;
    opacity: 0;
  }
  .department{
    border-radius: 15px 15px 0 0 ;
    height: 90vh;
    background: white;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #F6F6F6;
    .dept-header{
      border-radius: 15px 15px 0 0 ;
      height: 46px;
      line-height: 46px;
      padding:0 16px;
      color: #3296FA;
      background: white;
      white-space: nowrap;
      overflow-x: auto;
      i{
        margin-right: 3px;
        color: #909399;
      }
    }
    .dept-list{
      margin-top: 10px;
      background: white;
      padding: 0 16px;
      .dept-item{
        height: 50px;
        line-height: 50px;
        position: relative;
        border-bottom: 1px solid #f6f6f6;
        .dept-name{
          font-weight: bold;
        }
        .dept-next{
          position: absolute;
          top: 0;
          right: 0;
          height: 46px;
          color: #8a8a8a;
          img{
            width: 12px;
            position: relative;
            top: -1px;
          }
        }
      }
      >div:last-child{
        border-bottom: none;
      }
    }
    
  }
}

.goal-content textarea::-webkit-input-placeholder {
  color: #C0C4CC;
}

.goal-content textarea:-moz-placeholder {
  color: #C0C4CC;
}

.goal-content textarea::-moz-placeholder {
  color: #C0C4CC;
}

.goal-content textarea:-ms-input-placeholder {
  color: #C0C4CC;
}
</style>